<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>推荐热榜</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/logout.js"></script>
    <script src="js/urlutis.js"></script>

    <style>
        .container-right input {
            margin-left: 10px;
            width: 300px;
            height: 30px;
            line-height: 40px;
            font-size: 16px;
            border-radius: 10px;
            border: 0.5px solid;
            outline: none;
            text-indent: 10px;
        }

        .btn1-style {
            background-color: rgb(34, 177, 156);
            color: white;
            border: none;
            padding: 8px 12px;
            font-size: 14px;
            border-radius: 10px;
            cursor: pointer;
        }
    </style>


</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo3.jpg" alt="">
        <span class="title">推荐热榜</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="javascript:logout()">退出</a>
    </div>
    <!-- 版心 -->
    <div class="container">

        <!-- 右侧内容详情 -->
        <div id="artListDiv" class="container-right" style="margin-left: 10%">
            <div class="blog">
                <!-- <h3 style="text-align: center; color: rgb(235, 60, 60);">热榜第一</h3>
                <div class="title">《西游记》</div>
                <div class="date">2023-12-6</div>
                <div class="desc">诗曰：混沌未分天地乱，茫茫渺渺无人见。自从盘古破鸿濛，开辟从兹清浊辨。覆载群生仰至仁，发明万物皆成善。欲知造化会元功，须看《西游释厄传》</div>
                <a href="blog_content.html?aid=1" class="detail">查看全文 &gt;&gt;</a>
                <a href="blog_content.html?aid=1" class="detail">评论 &gt;&gt;</a>
            </div><br>
            <div class="blog">
                <h3 style="text-align: center; color: rgb(235, 60, 60);">热榜第二</h3>
                <div class="title">《西游记》</div>
                <div class="date">2023-12-6</div>
                <div class="desc">诗曰：混沌未分天地乱，茫茫渺渺无人见。自从盘古破鸿濛，开辟从兹清浊辨。覆载群生仰至仁，发明万物皆成善。欲知造化会元功，须看《西游释厄传》</div>
                <a href="blog_content.html?aid=1" class="detail">查看全文 &gt;&gt;</a>
                <a href="blog_content.html?aid=1" class="detail">评论 &gt;&gt;</a>
            </div><br>
            <div class="blog">
                <h3 style="text-align: center; color: rgb(235, 60, 60);">热榜第三</h3>
                <div class="title">《西游记》</div>
                <div class="date">2023-12-6</div>
                <div class="desc">诗曰：混沌未分天地乱，茫茫渺渺无人见。自从盘古破鸿濛，开辟从兹清浊辨。覆载群生仰至仁，发明万物皆成善。欲知造化会元功，须看《西游释厄传》</div>
                <a href="blog_content.html?aid=1" class="detail">查看全文 &gt;&gt;</a>
                <a href="blog_content.html?aid=1" class="detail">评论 &gt;&gt;</a>
            </div><br> -->
        </div>

    </div>

    <script type="text/javascript">

        // 初始化页面
        function init() {
            jQuery.ajax({
                url: "/art/recommend",
                type: "GET",
                data: {},
                success: function (res) {
                    var createHtml = '';
                    // 3. 将数据展示到前端
                    if (res.code == 200 && res.data != null) {
                        if (res.data.length < 3) {
                            alert("文章太少，不做推荐");
                            return false;
                        }
                        // 拼接
                        // 榜一
                        createHtml += '<div class="blog" >';
                        createHtml += '<h3 style="text-align: center; color: rgb(235, 60, 60);">热榜第一</h3>';
                        createHtml += '<div class="title">' + res.data[0].title + '</div>';
                        createHtml += '<div class="date">' + res.data[0].createtime + '</div>';
                        createHtml += '<div class="desc">' + res.data[0].content + '</div>';
                        createHtml += '<a href="blog_content.html?aid=' + res.data[0].id
                            + '" class="detail" >查看全文 &gt;&gt;</a>';
                        createHtml += '<a href="blog_add2.html?aid=' + res.data[0].id + '"class="detail">评论 &gt;&gt;</a>';
                        createHtml += '</div><br>';
                        // 榜二
                        createHtml += '<div class="blog" >';
                        createHtml += '<h3 style="text-align: center; color: rgb(235, 60, 60);">热榜第二</h3>';
                        createHtml += '<div class="title">' + res.data[1].title + '</div>';
                        createHtml += '<div class="date">' + res.data[1].createtime + '</div>';
                        createHtml += '<div class="desc">' + res.data[1].content + '</div>';
                        createHtml += '<a href="blog_content.html?aid=' + res.data[1].id
                            + '" class="detail" >查看全文 &gt;&gt;</a>';
                        createHtml += '<a href="blog_add2.html?aid=' + res.data[1].id + '"class="detail">评论 &gt;&gt;</a>';
                        createHtml += '</div><br>';
                        // 榜三
                        createHtml += '<div class="blog" >';
                        createHtml += '<h3 style="text-align: center; color: rgb(235, 60, 60);">热榜第三</h3>';
                        createHtml += '<div class="title">' + res.data[2].title + '</div>';
                        createHtml += '<div class="date">' + res.data[2].createtime + '</div>';
                        createHtml += '<div class="desc">' + res.data[2].content + '</div>';
                        createHtml += '<a href="blog_content.html?aid=' + res.data[2].id
                            + '" class="detail" >查看全文 &gt;&gt;</a>';
                        createHtml += '<a href="blog_add2.html?aid=' + res.data[2].id + '"class="detail">评论 &gt;&gt;</a>';
                        createHtml += '</div><br>';
                        jQuery("#artListDiv").html(createHtml);
                    }

                }
            })
        }
        init();

        //回复评论功能
        function doReply(button) {
            var reply = jQuery(button).prevAll("input[type='text']").eq(0);
            var user = jQuery(button).siblings("h3").eq(0).text().split("：")[0]; // 获取评论人的名字
            var discuss = jQuery(button).siblings("h3").eq(0).text().split("：")[1];
            if (reply.val().trim() == "") {
                alert("还没输入回复内容哦");
                return false;
            }
            // alert(user);
            // alert(discuss)
            // alert(reply.val());
            jQuery.ajax({
                url: "/art/doreply",
                type: "POST",
                data: {
                    "reply": reply.val(),
                    "toUser": user,
                    "discuss": discuss
                },
                success: function (res) {
                    if (res.code == 200 && res != null) {
                        alert("成功回复" + user + "的评论");
                        location.href = location.href;
                    } else {
                        alert("回复失败" + res.msg);
                    }
                }
            })
        }

    </script>
</body>

</html>